<template>
  <div class="recommend" ref="recommend" >
   <scroll ref="scroll" class="recommend-content" :data="playList">
      <div>
        <div v-show="slideshow.length" class="decorate" v-if="slideshow.length"></div>
        <div v-if="slideshow.length" class="slider-wrapper">
          <slider>
            <div v-for="item in slideshow" :key="item.id" @click.stop="selectBanner(item)">
              <img class="needsclick" :src="item.picUrl">
            </div>
          </slider>
        </div>
         <div class="recommend-list" ref="recommendList">
            <div class="gedan">
                <h1 class="title">推荐歌单</h1>
                <router-link to="/gengduo" class="gengduo" tag="h1">
              更多....
           </router-link>
            </div>
          <ul>
            <li class="item" v-for="item in playList" :key="item.id">
              <div class="icon" @click="selectList(item)">
                <div class="gradients"></div>
                <img v-lazy="item.picUrl">
              </div>
              <p class="play-count">
                <i class="fa fa-headphones"></i>
                {{Math.floor(item.playCount / 10000) }}万
              </p>
              <div class="text">
                <p class="name">{{item.name}}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="loading-content" v-show = "!playList.length"></div>
      <loading></loading>
   </scroll>
  </div>
</template>

<script>
import Loading from 'base/loading/loading'
import Scroll from 'base/scroll/scroll'
import Slider from 'base/slider/slider'
import {getRecommendList, getSlideshow} from 'api/recommend'
import { code } from 'common/js/config'
export default {
  data() {
    return {
      slideshow: [],
      playList: []
    }
  },
  created() {
    this._getSlideshow()
    this._getRecommend()
  },
  methods: {
    _getSlideshow() {
      getSlideshow().then(res => {
        if (res.data.code === code) {
          this.slideshow = res.data.banners
          // console.log(res.data.banners)
        }
      })
    },
    _getRecommend() {
      getRecommendList().then(res => {
        if (res.data.code === code) {
          this.playList = res.data.result
        } else {
          console.error('getRecommendList 获取失败')
        }
      })
    },
    // 解决轮播图跟推荐歌单谁先获取到数据而出现的问题
    losdImage() {
      if (!this.checkLoaded) {
        this.$refs.scroll.refresh()
        this.checkLoaded = true
      }
    }
  },
  components: {
    Slider,
    Scroll,
    Loading
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/variable'
@import '~common/stylus/mixin'
.recommend
  position: fixed
  width: 100%
  top: 88px
  bottom: 0
  z-index: 100
  .recommend-content
    width: 100%
    height: 100%
    overflow: hidden
    .decorate
      position: absolute
      top: -30vh
      z-index: -10
      // background: $color-theme
      width: 100%
      height: 50vh
      vertical-align: inherit
    .slider-wrapper
      width: 96%
      margin: 0 auto
      border-radius: 5px
      overflow: hidden
    .recommend-list
      position: relative
      box-sizing: border-box
      width: 100%
      text-align: center
     .gedan
       height: 65px
       line-height: 65px
       font-size: $font-size-medium
       font-weight: bold
       color: $color-texth
       background-color :$color-text
      .title
        float:left
        padding-left: 1.5%
        text-align: left
      .gengduo
        float:right
        color: $color-text-g
        padding-right: 1.5%
        text-align: right
      .item
        display: inline-block
        position: relative
        box-sizing: border-box
        width: 33%
        padding: 0 1%
        .icon
          position: relative
          display: inline-block
          width: 100%
          margin-bottom: 5px
          .gradients
            position: absolute
            top: 0
            width: 100%
            height: 35px
            border-radius: 3px
            background: linear-gradient(rgba(109, 109, 109, 0.4), rgba(255, 255, 255, 0))
          img
            width: 100%
            height: 100%
            border-radius: 3px
        .play-count
          position: absolute
          top: 5px
          right: 8px
          font-size: $font-size-small-s
          color: $color-text-l
        .text
          float: left
          line-height: 16px
          text-align: left
          height: 40px
          line-height: 16px
          overflow: hidden
          margin-bottom: 10px
          font-size: $font-size-small
    .recommend-song
      margin-top: -20px
      box-sizing: border-box
      width: 100%
      text-align: center
      .title
        height: 65px
        line-height: 65px
        padding-left: 1.5%
        text-align: left
        font-size: $font-size-medium
        font-weight: bold
        color: $color-text
      .item
        display: inline-block
        position: relative
        box-sizing: border-box
        width: 33%
        padding: 0 1%
        .icon
          position: relative
          display: inline-block
          width: 100%
          margin-bottom: 5px
          img
            width: 100%
            height: 100%
            border-radius: 3px
        .text
          line-height: 16px
          text-align: left
          height: 16px
          no-wrap()
          font-size: $font-size-small
        .singer
          line-height: 16px
          margin-bottom: 10px
          text-align: left
          no-wrap()
          font-size: $font-size-small
          color: $color-text-g
    .loading-content
        position : absolute
        width : 100%
        top: 50%
        transform: translateY(-50%)
</style>